// 模块缓动动画
import React, { useState, useEffect } from 'react';
import { motion } from 'framer-motion';
import './Animations.css';

const boxes = [
    { id: 1, title: '创意供给', problem: `创意无法及时满足 <br /> 高频个性化需求?`, analysis: '创意供给：海量需求及时满足', question: '稿定旗下花瓣、咔神及专业定制设计团队，为企业提供多样、优质创意内容' },
    { id: 2, title: '内容生产', problem: `如何用设计工具提 <br /> 升内容生产效率?`, analysis: '内容生产：创作效率不断提升', question: '海量版权模板及智能设计工具，全方位提升企业视觉内容创作效率及质量' },
    { id: 3, title: '资产管理', problem: `内容资产如何协同 <br /> 管理、高效复用?`, analysis: '资产管理：盘活企业内容资产价值', question: '构建多端共享、实时同步、安全合规的资产管理体系，为营销增长护航' },
    { id: 4, title: '营销应用', problem: `营销内容如何多平 <br /> 台高效应用?`, analysis: '营销应用：效率与效果双重保障', question: '智能内容宣发，快速覆盖公域渠道+私域营销场景，让企业内容营销更高效' },
    { id: 5, title: '效果监测', problem: `如何借助数据 <br /> 反哺内容优化?`, analysis: '效果监测：多维数据让营销更有谱', question: '全流程营销内容数据可视化呈现，洞悉需求与趋势，为内容优化提供依据' },
    { id: 6, title: '系统定制', problem: `企业个性化需求 <br /> 如何满足?`, analysis: '系统定制：打造企业专属内容中台', question: '通过私有化部署，满足企业更多个性化需求，与企业业务流程紧密结合' }
];

const BoxAnimation: React.FC = () => {
    const [activeBox, setActiveBox] = useState<number | null>(1); // 默认设置为第一个
    const [hoveredBox, setHoveredBox] = useState<number | null>(null); // 悬停的盒子

    useEffect(() => {
        // 初始化时设置第一个盒子为 active
        setActiveBox(1);
    }, []);

    return (
        <div className="box-container">
            {/* 第一行 */}
            <div className="first-row">
                {boxes.slice(0, 3).map((box) => {
                    const isActive = activeBox === box.id;
                    const isHovered = hoveredBox === box.id;

                    return (
                        <motion.div
                            key={box.id}
                            className="box"
                            onMouseEnter={() => {
                                setActiveBox(box.id);
                                setHoveredBox(box.id); // 记录当前悬停的盒子
                            }}
                            onMouseLeave={() => {
                                setHoveredBox(box.id); // 移出时悬停状态
                            }}
                            style={{
                                flex: isActive || (hoveredBox && hoveredBox === box.id)
                                    ? '1 0 48%'
                                    : '1 0 25%', // 其他盒子为25%
                            }}
                            initial={{ opacity: 0, scale: 0.5 }}
                            animate={{ opacity: 1, scale: 1 }}
                            transition={{ duration: 0.8 }}
                        >
                            {/* 根据悬停状态显示内容 */}
                            {isHovered ? (
                                <div>
                                    <h2>{box.analysis}</h2>
                                    <p>{box.question}</p>
                                </div>
                            ) : (
                                <div>
                                    <div style={{ fontSize: '30px', color: '#e6eeff' }}>{box.id}</div>
                                    <h3 style={{ color: '#2254f4' }}>{box.title}</h3>
                                    <h2 dangerouslySetInnerHTML={{ __html: box.problem }} />
                                </div>
                            )}
                        </motion.div>
                    );
                })}
            </div>
            {/* 第二行 */}
            <div className="second-row">
                {boxes.slice(3).map((box) => {
                    const isActive = activeBox && activeBox > 3 && activeBox === box.id + 3;
                    const isHovered = hoveredBox && hoveredBox > 3 && hoveredBox === box.id + 3;

                    return (
                        <motion.div
                            key={box.id}
                            className="box"
                            onMouseEnter={() => {
                                setActiveBox(box.id + 3); // 加上3以区分第二行的盒子
                                setHoveredBox(box.id + 3); // 记录当前悬停的盒子
                            }}
                            onMouseLeave={() => {
                                setHoveredBox(box.id + 3); // 移出时悬停状态
                            }}
                            style={{
                                flex: isActive || isHovered
                                    ? '1 0 48%'
                                    : '1 0 25%', // 默认宽度为25%
                            }}
                            initial={{ opacity: 0, scale: 0.5 }}
                            animate={{ opacity: 1, scale: 1 }}
                            transition={{ duration: 0.8 }}
                        >
                            {/* 根据悬停状态显示内容 */}
                            {isHovered ? (
                                <div>
                                    <h2>{box.analysis}</h2>
                                    <p>{box.question}</p>
                                </div>
                            ) : (
                                <div>
                                    <div style={{ fontSize: '30px', color: '#e6eeff' }}>{box.id}</div>
                                    <h3 style={{ color: '#2254f4' }}>{box.title}</h3>
                                    <h2 dangerouslySetInnerHTML={{ __html: box.problem }} />
                                </div>
                            )}
                        </motion.div>
                    );
                })}
            </div>
        </div>
    );
};

export default BoxAnimation;